<template>
  <div>
    <el-row class="warp">
      <el-col :span="24" class="warp-breadcrum">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
          <el-breadcrumb-item>金融机构信息</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>

      <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
        <!--工具条-->
        <el-row :span="24" class="query-form">
          <el-form :inline="true" :model="filters">
            <el-form-item class="query-el-form-item" label="金融机构名称">
              <el-input v-model="filters.enterpriseName" placeholder="金融机构名称"
                        @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item class="query-el-form-item" label="统一社会信用代码">
              <el-input v-model="filters.enterpriseIdNbr" placeholder="统一社会信用代码"
                        @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item class="query-el-form-item" label="认证状态">
              <el-select v-model="filters.indentityState" placeholder="请选择">
                <el-option label="待核验" :value="0"></el-option>
                <el-option label="已核验" :value="1"></el-option>
                <el-option label="待认证" :value="2"></el-option>
                <el-option label="已认证" :value="3"></el-option>
                <el-option label="核验失败" :value="91"></el-option>
                <el-option label="认证失败" :value="92"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="query-el-form-item" label="法人姓名">
              <el-input v-model="filters.ownerName" placeholder="法人姓名"
                        @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>

            <el-form-item class="query-el-form-item" style="float: right">
              <el-button type="primary" @click="$router.push('/enterprise/enterprise_oper/')">新增</el-button>
            </el-form-item>

            <el-form-item class="query-el-form-item" style="float: right">
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>

          </el-form>
        </el-row>

        <!--列表-->
        <el-table stripe :data="bizDomains"  highlight-current-row v-loading="loading" style="width: 100%;">
          <el-table-column type="index" width="60">
          </el-table-column>
          <el-table-column prop="enterpriseName" label="金融机构名称" min-width="160" >
          </el-table-column>
          <el-table-column prop="enterpriseIdNbr" label="统一信用代码" min-width="170" >
          </el-table-column>
          <el-table-column prop="enterpriseCode" label="机构编码" min-width="170" >
          </el-table-column>
          <el-table-column prop="indentityState" label="认证状态" :formatter="formatState" width="105" sortable>
          </el-table-column>
          <el-table-column prop="ownerName" label="法人姓名" width="105" >
          </el-table-column>
          <el-table-column prop="ownerTel" label="法人手机号" min-width="120" >
          </el-table-column>
          <el-table-column prop="checkDate" label="核验时间" min-width="150">
          </el-table-column>
          <el-table-column property="operate" label="操作" width="180">
            <template scope="scope">
              <el-button
                size="mini" type="text" icon="el-icon-edit"
                @click="$router.push('/enterprise/enterprise_oper/' + scope.row.id)">编辑
              </el-button>
              <el-button
                size="mini" type="text" icon="el-icon-delete" @click="doDel(scope.row.id)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNumber"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount">
      </el-pagination>
    </el-row>


    <el-dialog :title="detailDialog.title" :visible.sync="detailDialog.isShow" width="750px"
               :close-on-click-modal="false"
               @close="closeDetailDialogFn"
               :modal="true">
      <el-row class="warp">
        <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
          <el-form :model="detailForm" ref="detailForm" label-width="80px" size="medium">
            <el-row class="warp">
              <el-col :span="24">
                <el-form-item label="金融机构名称">
                  <el-input readonly v-model="enterpriseIdentityVO.enterpriseName"
                            style="border:none;outline: medium;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="warp">
              <el-col :span="16">
                <el-form-item label="认证审核">
                  <el-select v-model="detailForm.indentityState" placeholder="请选择">
                    <el-option label="待核验" :value="0"></el-option>
                    <el-option label="已核验" :value="1"></el-option>
                    <el-option label="待认证" :value="2"></el-option>
                    <el-option label="已认证" :value="3"></el-option>
                    <el-option label="核验失败" :value="91"></el-option>
                    <el-option label="认证失败" :value="92"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
              <span class="dialog-footer">
                  <el-button size="medium" type="default"
                             @click="closeDialogFn(detailDialog.isShow = false)">取消</el-button>
                  <el-button size="medium" type="primary" @click="submitDetailForm('detailForm')">审核</el-button>
                </span>
              </el-col>
            </el-row>

          </el-form>
        </el-col>
      </el-row>


      <el-row class="warp">
        <el-col :span="24" class="warp-main">
          <section class="chart-container">
            <el-row class="warp">
              <el-col :span="6">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="enterpriseIdentityVO.businessLicence" class="image">
                  <div style="padding: 14px;">
                    <span>营业执照</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="enterpriseIdentityVO.openAcctLicence" class="image">
                  <div style="padding: 14px;">
                    <span>开户许可证</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="enterpriseIdentityVO.ownerIdPhotoFront" class="image">
                  <div style="padding: 14px;">
                    <span>法人身份证正面</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="enterpriseIdentityVO.ownerIdPhotoBack" class="image">
                  <div style="padding: 14px;">
                    <span>法人身份证反面</span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </section>
        </el-col>
      </el-row>
      <el-row class="warp">
        <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
          <!--列表-->
          <el-table :data="enterpriseIdentityVO.enterpriseIdentityExtVO" border highlight-current-row v-loading="loading"
                    style="width: 100%;">
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="identityExtName" label="材料名称" min-width="160" sortable>
            </el-table-column>
            <el-table-column prop="source" label="材料地址" min-width="170" sortable>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import bizAPI from '../../api/api_enterprise';

  export default {
    data() {
      return {
        filters: {
          enterpriseName: '',
          ownerName: '',
          enterpriseIdNbr:'',
          indentityState:''
        },
        detailDialog: {
          isShow: false,
          title: '金融机构认证信息'
        },
        detailForm: {
          indentityState: 0
        },
        enterpriseIdentityVO: {
          enterpriseName: '',
          businessLicence: '',
          openAcctLicence:'',
          ownerIdPhotoFront:'',
          ownerIdPhotoBack:'',
          enterpriseIdentityExtVO: []
        },
        bizDomains: [],
        page: {
          pageSize: 10,
          pageNumber: 1,
          totalCount: 0
        },
        loading: false
      }
    },
    methods: {
      submitDetailForm(formName) {
        let _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            bizAPI.changeState(this.detailForm).then(result => {
              _this.$message({
                message: result.message,
                type: 'success'
              })
              _this.handleSearch()
              _this.detailDialog.isShow = false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      openDetailDialogFn(row) {

        this.detailDialog.isShow = true
        Object.assign(this.detailForm, row)
        let bizId = row.id;
        this.enterpriseIdentityVO = {
          enterpriseName: '',
            businessLicence: '',
            openAcctLicence:'',
            ownerIdPhotoFront:'',
            ownerIdPhotoBack:'',
            enterpriseIdentityExtVO: []
        };
        if (bizId) {
          bizAPI.getEnterpriseIdentityInfos({'id': bizId}).then(res => {
            this.enterpriseIdentityVO = res.data;
            this.loading = false;
          })
        }
      },
      closeDetailDialogFn() {
        this.detailDialog.isShow = false
      },
      //显示转换
      formatState: function (row, column) {
        //Value	Label
        //0	待核验
        //1	已核验
        //2	待认证
        //3	已认证
        //91	核验失败
        //92	认证失败

        let state = '';
        if (row.indentityState == 0) {
          state = '待核验'
        }
        if (row.indentityState == 1) {
          state = '已核验'
        }
        if (row.indentityState == 2) {
          state = '待认证'
        }
        if (row.indentityState == 3) {
          state = '已认证'
        }
        if (row.indentityState == 91) {
          state = '核验失败'
        }
        if (row.indentityState == 92) {
          state = '认证失败'
        }
        return state;
      },

      doDel(bizId) {
        let _this = this
        this.$confirm('此操作将删除该金融机构信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          bizAPI.doDel({'id': bizId}).then(result => {
            _this.$message({
              message: result.message,
              type: 'success'
            })
            _this.handleSearch()
          })
        }).catch(() => {
        })
      },
      handleSearch() {
        this.page.totalCount = 0;
        this.page.pageNumber = 1;
        this.search();
      },
      //获取列表
      search: function () {
        let that = this;
        let params = {

        };
        Object.assign(params, this.filters);
        Object.assign(params, this.page);


        that.loading = true;
        bizAPI.qryByPage(params).then(function (result) {
          that.loading = false;
          if (result) {
            that.page.totalCount = result.data.totalCount;
            that.bizDomains = result.data.result;
          }
        }, function (err) {
          that.loading = false;
          that.$message.error({showClose: true, message: err.toString(), duration: 2000});
        }).catch(function (error) {
          that.loading = false;
          console.log(error);
          that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
        });
      },
      handleSizeChange(pageSize) {
        this.page.pageSize = pageSize;
        this.search();
      },
      handleCurrentChange(pageNumber) {
        this.page.pageNumber = pageNumber;
        this.search();
      }

    },
    mounted() {
      let status = this.$route.query.indentityState
      if (status){
        this.filters.indentityState = parseInt(status)
      }
      this.handleSearch()
    }
  }
</script>

<style scoped>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
